<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">  
    <ui:composition template="/panel.xhtml">
        <ui:define name="contenido">
            <h:form id="frmPrincipal" enctype="multipart/form-data">
                <p:panel id="pnlPrincipal" header="USUARIO" style="font-size: 10px">
                    <h:panelGrid id="pgFormDto" columns="6" cellpadding="4">
                        <h:outputLabel for="itDescripcion" value="DESCRIPCIÓN" style="font-size: 10px"/>
                        <p:inputText id="itDescripcion" label="DESCRIPCIÓN" value="#{usuarioMBean.dto.descripcion}"
                                     required="true" size="40" style="font-size: 10px"/>

                        <h:outputLabel for="itDescripcionCorta" value="DESCRIPCIÓN CORTA" style="font-size: 10px"/>
                        <p:inputText id="itDescripcionCorta" label="DESCRIPCIÓN CORTA" value="#{usuarioMBean.dto.descripcionCorta}"
                                     required="true" size="20" style="font-size: 10px"/>

                        <h:outputLabel for="itUsername" value="USERNAME" style="font-size: 10px"/>
                        <p:inputText id="itUsername" label="USERNAME" value="#{usuarioMBean.dto.username}"
                                     required="true" size="40" style="font-size: 10px"/>

                        <h:outputLabel for="itPassword" value="PASSWORD" style="font-size: 10px"/>
                        <p:inputText id="itPassword" label="PASSWORD" value="#{usuarioMBean.dto.password}"
                                     required="true" size="40" style="font-size: 10px"/>

                        <h:outputLabel for="itEmail" value="EMAIL" style="font-size: 10px"/>
                        <p:inputText id="itEmail" label="EMAIL" value="#{usuarioMBean.dto.email}"
                                     required="true" size="40" style="font-size: 10px"/>                                                                                                                                              
                    </h:panelGrid>
                    <h:outputLabel value="FOTO" style="font-size: 10px"/>
                    <p:separator/>
                    <h:panelGrid columns="2" cellpadding="5">
                        <p:fileUpload sizeLimit="100000000000" fileUploadListener="#{usuarioMBean.fileUploadListener}" mode="advanced" 
                                      allowTypes="/(\.|\/)(jpg)$/" uploadLabel=" " cancelLabel=" " update=":frmPrincipal"/>
                        <h:graphicImage value="#{usuarioMBean.dto.urlImagen}" rendered="true" height="250" width="250" style="height: 150px; width: 150px;"/>
                    </h:panelGrid>  
                    <f:facet name="footer">
                        <p:commandButton title="GUARDAR" icon="ui-icon ui-icon-disk"
                                         value="GUARDAR" action="#{usuarioMBean.guardar}"
                                         style="font-size: 10px"/>
                    </f:facet>
                </p:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

